import React, { useState } from 'react'
import '../css/Lbx_Kfp.css'
import { LeftOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import { Collapse } from 'antd-mobile'

export default function Kfp() {
    let navigate = useNavigate()
    let [flag, setFlag] = useState(0)
    return (
        <div id='kfp'>
            <div className='top'>
                <div className='shang'>
                    <LeftOutline onClick={() => { navigate(-1) }} /><div>开发票</div><div className='kfp'></div>
                </div>
                <div className='xia'>
                    <div className={flag === 0 ? 'active' : ''} onClick={() => { setFlag(0) }}>出行服务开票</div>
                    <div className={flag === 1 ? 'active' : ''} onClick={() => { setFlag(1) }}>开票历史</div>
                    <div className={flag === 2 ? 'active' : ''} onClick={() => { setFlag(2) }}>开票帮助</div>
                </div>
            </div>
            {
                flag === 0 ? <div className="main">
                    <li>
                        6月24日 10:00<span>阳光出行</span>
                        <div className='p'><div className='b'>●</div>越秀财富世纪广场-停车场</div>
                        <div className='p'><div className='g'>●</div>大江苑</div>
                        <div className="price">10.00<span>元</span></div>
                    </li>
                    <div className="bottom">
                        <div><span>1</span>个行程，共<span>10.00</span>元</div><button onClick={() => { navigate('/kfp2') }}>下一步</button>
                    </div>
                </div> : ""
            }
            {
                flag === 1 ? <div className="main">
                    <li onClick={() => { navigate('/fpmx') }}>
                        6月24日 10:00<span>10.00元 ＞</span>
                        <div className='p'>出行服务（电子发票）</div>
                        <div className='p'>已开票</div>
                    </li>
                </div> : ""
            }
            {
                flag === 2 ? <div className="main">
                    <div className="zdmb">
                        <Collapse accordion>
                            <Collapse.Panel key='1' title='雪梨专车'>
                                <img src='https://ts1.cn.mm.bing.net/th/id/R-C.4ce1667a2babeb93afe6436f863ebfc8?rik=GCtJsHWbUpvPAA&riu=http%3a%2f%2fpic.616pic.com%2fys_bnew_img%2f00%2f14%2f12%2fMtK7nVopjl.jpg&ehk=KKJpQapi5cKIlq2Z4mjqnqVda9UNgEbRs3TQgsPwzyc%3d&risl=&pid=ImgRaw&r=0' width='25rem' />
                                1、雪梨出行最快可在10分钟内为您开具电子发票，并将电子发票发送到您的邮箱；<br />
                                2、行程中发送的过路桥非、高速费、停车费等，请您及时向收费站或者停车场索取相关的发票，根据国家税收相关法规规定，阳光出行不开具以上项目的发票；<br />
                                3、行程中消费的各种形式的折扣券金额阳光出行不支持开票；<br />
                                4、如果您对发票有任务和我，请拨打阳光出行客服电话；<br />
                                5、阳光出行客服电话为400-699-9560
                            </Collapse.Panel>
                            <Collapse.Panel key='2' title='香蕉出行'>
                                <img src='https://img.tukuppt.com/png_preview/00/04/56/qbCkYoBrka.jpg!/fw/780' width='30rem' />
                                1、香蕉出行最快可在10分钟内为您开具电子发票，并将电子发票发送到您的邮箱；<br />
                                2、行程中发送的过路桥非、高速费、停车费等，请您及时向收费站或者停车场索取相关的发票，根据国家税收相关法规规定，阳光出行不开具以上项目的发票；<br />
                                3、行程中消费的各种形式的折扣券金额阳光出行不支持开票；<br />
                                4、如果您对发票有任务和我，请拨打阳光出行客服电话；<br />
                                5、阳光出行客服电话为400-699-9560
                            </Collapse.Panel>
                            <Collapse.Panel key='3' title='萝卜出行'>
                                <img src='https://ts1.cn.mm.bing.net/th/id/R-C.b7e9a1619465a0a310d0c2fba7658b05?rik=7%2b4m8jxBkFTzDQ&riu=http%3a%2f%2fpic.baike.soso.com%2fp%2f20130704%2f20130704104342-1389328053.jpg&ehk=5gnGNI3kQqS26A3ZM6EPosuHCHAUrPgyYWRRdusrpEs%3d&risl=&pid=ImgRaw&r=0' width='30rem' />
                                1、香蕉出行最快可在10分钟内为您开具电子发票，并将电子发票发送到您的邮箱；<br />
                                2、行程中发送的过路桥非、高速费、停车费等，请您及时向收费站或者停车场索取相关的发票，根据国家税收相关法规规定，阳光出行不开具以上项目的发票；<br />
                                3、行程中消费的各种形式的折扣券金额阳光出行不支持开票；<br />
                                4、如果您对发票有任务和我，请拨打阳光出行客服电话；<br />
                                5、阳光出行客服电话为400-699-9560
                            </Collapse.Panel>
                        </Collapse>
                    </div>
                </div> : ""
            }
        </div>
    )
}
